	<html xmlns="http://www.w3.org/1999/xhtml">
 	  <head>
	    <style type="text/css">
 	        #map {
	            width: 800px;
 	            height: 350px;
 	            border: 1px solid gray;
 	        }
 	        #controlToggle li {
 	            list-style: none;
 	        }
 	    </style>
 	    <script src="http://www.openlayers.org/api/2.9/OpenLayers.js"></script>
 	    <script type="text/javascript">
 	        var map, drawControls, select;
 	        function onFeatureSelect(feature) {
 	            popup = new OpenLayers.Popup.Anchored("chicken",
 	                                     feature.geometry.getBounds().getCenterLonLat(),
 	                                     new OpenLayers.Size(250,75),
 	                                     "<div style='font-size:.8em'>Feature: " + feature.id +"<br />Area: " + feature.geometry.getArea()+"</div>",
 	                                     null, true);
 	            feature.popup = popup;
 	            map.addPopup(popup);
 	        }
 	        function onFeatureUnselect(feature) {
	            map.removePopup(feature.popup);
 	            feature.popup.destroy();
	            feature.popup = null;
	        }   
 	        function init(){
 	            map = new OpenLayers.Map('map');
 	            var wmsLayer = new OpenLayers.Layer.WMS( "OpenLayers WMS",
 	                "http://labs.metacarta.com/wms/vmap0?", {layers: 'basic'});

 	            var polygonLayer = new OpenLayers.Layer.Vector("Polygon Layer");
 	
 	            map.addLayers([wmsLayer, polygonLayer]);
 	            map.addControl(new OpenLayers.Control.LayerSwitcher());
	            map.addControl(new OpenLayers.Control.MousePosition());
 	           
	            drawControls = {
 	                polygon: new OpenLayers.Control.DrawFeature(polygonLayer,
 	                            OpenLayers.Handler.Polygon),
 	                select: new OpenLayers.Control.SelectFeature(polygonLayer,
	                {onSelect: onFeatureSelect,
 	                 onUnselect: onFeatureUnselect
 	                })
 	            };
 	           
 	            for(var key in drawControls) {
 	                map.addControl(drawControls[key]);
 	            }
 	
 	           
 	            map.setCenter(new OpenLayers.LonLat(0, 0), 3);
 	
 	        }
 	
 	        function toggleControl(element) {
 	            for(key in drawControls) {
 	                var control = drawControls[key];
 	                if(element.value == key && element.checked) {
 	                    control.activate();
 	                } else {
 	                    control.deactivate();
 	                }
 	            }
 	        }
 	    </script>
 	  </head>
 	  <body onload="init()">
 	    <h1>OpenLayers Draw Feature Example</h1>
 	    <div id="map"></div>
	    <ul id="controlToggle">
 	        <li>
 	            <input type="radio" name="type" value="none" id="noneToggle"
 	                   onclick="toggleControl(this);" checked="checked" />
	            <label for="noneToggle">navigate</label>
 	        </li>
 	        <li>
 	            <input type="radio" name="type" value="polygon" id="polygonToggle"
 	                   onclick="toggleControl(this);" />
 	            <label for="polygonToggle">draw polygon</label>
 	        </li>
	        <li>
 	            <input type="radio" name="type" value="select" id="selectToggle"
	                   onclick="toggleControl(this);" />
 	            <label for="selectToggle">select polygon on click</label>
 	        </li>
	    </ul>       
 	    <p>It is possible to use the onSelect/onUnselect hooks on the SelectFeature
 	       to do fun things -- like open a popup.
	    </p>   
 	  </body>
	</html>